/*
 * @Description: 借阅申请弹窗
 * @Author: Rfan
 * @Date: 2022-02-25 11:50:58
 * @LastEditTime: 2023-01-15 15:25:11
 */

import { useEffect, useState } from 'react';
import { Button, Col, Form, Input, Modal, Radio, Row, Select, Space, Table, Tabs } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { appState } from '@/store/mobx';
import { startBorrowProcess } from '@/api/workFlow/workflow';
import type { ICommonDialog, ICoordinate } from '@/interfaces/global';
import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;
const { Column } = Table;
const { Option } = Select;

class BorrowArchiveItem {
  archiveNo: string;
  archiveTypeName: string;
  departmentName: string;
  title: string;
  fondsName: string;
  secret: string;
  archiveItemId: number;
  atCode: number;
  atType: number;
  level: number;

  constructor(item: BorrowArchiveItem) {
    this.archiveNo = item.archiveNo;
    this.archiveTypeName = item.archiveTypeName;
    this.departmentName = item.departmentName;
    this.title = item.title;
    this.fondsName = item.fondsName;
    this.secret = item.secret;
    this.archiveItemId = item.archiveItemId;
    this.atCode = item.atCode;
    this.atType = item.atType;
    this.level = item.level;
  }
}

// const archiveItemList = [
//   {
//     archiveNo: '00001',
//     archiveTypeName: '文书档案',
//     departmentName: '开发部',
//     title: '文书档案-题名1',
//     fondsName: '石家庄分公司',
//     secret: '公开',
//     archiveItemId: 4,
//     atCode: 100,
//     atType: 1,
//     level: 2
//   }
// ];

export interface IStaticInfo extends ICoordinate {
  fondsName: string;
  archiveTypeName: string;
}

interface IBorrowDialog extends ICommonDialog {
  title?: string;
  data?: any[];
  staticInfo: IStaticInfo;
}

const BorrowDialog = (props: IBorrowDialog) => {
  const { visible, title = '借阅申请', data, staticInfo, onClose } = props;
  const [form] = Form.useForm();

  const [archiveItemList, setArchiveItemList] = useState([]);

  useEffect(() => {
    if (visible) {
      setArchiveItemList(
        data.map(
          (item) =>
            new BorrowArchiveItem({
              archiveNo: item.arcno,
              archiveTypeName: staticInfo.archiveTypeName,
              departmentName: '',
              title: item.title,
              fondsName: staticInfo.fondsName,
              secret: '',
              archiveItemId: item.id,
              atCode: staticInfo.atCode,
              atType: staticInfo.atType,
              level: staticInfo.level
            })
        )
      );
    }
  }, [visible]);

  const onCancel = () => {
    onClose();
  };

  /**
   * @description: 表单提交方法，触发submitApply方法
   */
  const submitForm = () => {
    form.submit();
  };

  /**
   * @description: 提交申请方法，提交时赋申请人与时间
   * @param {any} values 表单填写的数据
   * @return {*}
   */
  const submitApply = (values: any) => {
    const applyForm = { ...values };
    applyForm.proposer = appState.realName;
    applyForm.applyTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
    applyForm.archiveTypeName = staticInfo.archiveTypeName;
    applyForm.fondsName = staticInfo.fondsName;

    console.log('submit borrow', { applyForm, archiveItemList }, startBorrowProcess);
    startBorrowProcess({ applyForm, archiveItemList }).then((res) => {
      console.log('start process', res.data);
      onClose();
    });
  };

  return (
    <Modal
      title={title}
      visible={visible}
      width={800}
      onCancel={onCancel}
      footer={[
        <div className={cx('footer-wrap')}>
          <Space>
            <Button key="back" onClick={onCancel}>
              取消
            </Button>
            {/* <Button key="delDraft" onClick={onCancel}> */}
            {/*  删除草稿 */}
            {/* </Button> */}
            {/* <Button key="save" onClick={onCancel}> */}
            {/*  保存 */}
            {/* </Button> */}
            <Button
              key="submit"
              type="primary"
              onClick={() => {
                submitForm();
              }}
            >
              提交申请
            </Button>
          </Space>
        </div>
      ]}
    >
      <div className="form-wrap">
        <Space>
          <p>日期：{dayjs().format('YYYY-MM-DD')}</p>
          <p>申请人：{appState.realName}</p>
        </Space>

        <Form form={form} onFinish={submitApply}>
          <Row gutter={20}>
            <Col span={12}>
              <Form.Item name="realUser" label="实际利用人">
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={12}>
              <Form.Item
                name="title"
                label="申请标题"
                rules={[{ required: true, message: '请输入申请标题' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="useTypeEntity" label="实体利用申请">
                <Select>
                  <Option value="借出利用">借出利用</Option>
                  <Option value="现场利用">现场利用</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="useTypeElectronicRights" label="电子权限申请">
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="useDay" label="利用天数">
                <Input type="number" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col span={12}>
              <Form.Item
                name="purpose"
                label="利用目的"
                rules={[{ required: true, message: '请输入利用目的' }]}
              >
                <Select>
                  <Option value="史料、科学、学术研究">史料、科学、学术研究</Option>
                  <Option value="史书志书编写利用">史书志书编写利用</Option>
                  <Option value="政策指导">政策指导</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="description" label="利用说明">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </div>
      <div className="list">
        <p>利用说明： 本次利用申请包含：案卷 0 个，文件 {} 个</p>
        <Tabs
          type="card"
          defaultActiveKey="1"
          tabBarExtraContent={`本次利用申请包含：案卷  1 个 ，  文件  2  份`}
        >
          <TabPane tab="档案列表" key="1"></TabPane>
        </Tabs>
        <div className={cx('table-operate')}>
          <p>选择实体或电子利用后，可查看是否拥有档案利用权限</p>
          <Button>删除已选</Button>
        </div>

        <Table size="small" dataSource={archiveItemList} bordered>
          <Column title="序号" dataIndex="sortNo" key="sortNo" align="center"></Column>
          <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center"></Column>
          <Column title="题名" dataIndex="title" key="title" align="center"></Column>
          <Column title="档案分类" dataIndex="atName" key="atName" align="center"></Column>
          <Column
            title="实体利用"
            align="center"
            render={() => (
              <>
                <Radio.Group>
                  <Radio value={1}>借阅</Radio>
                  <Radio value={2}>复制</Radio>
                </Radio.Group>
              </>
            )}
          ></Column>
          <Column title="利用天数" align="center"></Column>
        </Table>
      </div>
    </Modal>
  );
};

export default BorrowDialog;
